<template>
  <div class="detail" v-show="init">
    <div class="detail-content">
      <div class="content">
        <div class="title">{{info.title}}</div>
        <div class="time-info">
          <div class="diff-time">
            <span>{{info.createTime | formatTime('YY-MM-DD HH:mm')}}</span>
            <span v-if="info.status === 20" class="green">已解决</span>
            <span v-else>问题挂了{{info.createTime | diffTime}}</span>
          </div>
          <div>{{info.readNum}}浏览</div>
        </div>
        <div class="need-reply">
          需要{{info.whoReplies}}回复
        </div>
        <div v-html="info.content"></div>
      </div>
      <div class="reply-box">
        <div class="reply hot-reply" v-if="topReply.length">
          <div class="reply-title">热门回复</div>
          <Reply v-for="item in topReply" :key="item.id" :content="item"/>
        </div>
        <div class="reply">
          <div class="reply-title">回复</div>
          <!--<Reply v-for="item in topReply" :key="item.id" :content="item"/>-->
        </div>

        <div class="see-all-btn" @click="goAllReply">查看全部回复</div>
      </div>
    </div>
    <MyReply :detailId="detailId"/>
  </div>
</template>

<script>
import Reply from '@/components/reply'
import MyReply from '@/components/my-reply'

export default {
  name: 'art-detail',
  components: {
    Reply, MyReply
  },
  data() {
    return {
      detailId: '',
      init: false,
      info: {},
      hotReply: [],
      topReply: []
    }
  },
  computed: {},
  methods: {
    async getDetail() {
      try {
        const res = await this.$get(`/problemArea/detail`, {
          id: this.detailId
        })
        if (res.code === 1) {
          const {topReply, ...info} = res.data
          this.info = info
          this.topReply = topReply
          this.init = true
        }
      }catch (e) {}
    },
    goAllReply() {
      this.$router.push(`/all-reply/${this.detailId}`)
    },
  },
  created() {
    this.detailId = this.$route.params.id
  },
  async mounted() {
    this.$vux.loading.show({
      text: '加载中'
    })
    await this.getDetail()
    this.$vux.loading.hide()
  },
  /*async activated() {

  },
  deactivated() {

  }*/
}
</script>

<style lang="less" scoped>
@import "../../style/var";

.detail {
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .detail-content{
    flex: 1;
    .content {
      padding: 20px;
    }
  }
}

.title {
  font-size: 32px;
  font-weight: bold;
}

.need-reply{
  background-color: @gray-light;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 28px;
}

.time-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  margin: 15px 0;
  color: @gray;
  .diff-time {
    > span {
      margin-right: 10px;
    }
  }
}

.reply {
  .reply-title {
    font-size: 36px;
    font-weight: bold;
    border-top: 20px solid @gray-light;
    line-height: 3;
    padding-left: 20px;
  }
}

.see-all-btn {
  width: 70%;
  margin: 20px auto;
  text-align: center;
  border-radius: 8px;
  font-size: 28px;
  color: @blue;
  background-color: @gray-light;
  line-height: 3;
}
</style>
